<template>
        <div class="backgroud">
                <div id="my_mid">
                        <div class="midPic">
                            <router-link :to="{path:'/login'}" v-if="dateFlag">
                                <img id src="../../images/white.png" />
                                <p id="dlts" >点击登录</p>
                            </router-link>
                            <router-link :to="{path:'/FZBTableCheckSj'}" v-if="!dateFlag">
                                <img id src="../../images/white.png" />
                                <p id="dlts" >{{nowUser}}</p>
                            </router-link>
                        </div>
                        <div class="weui_cells weui_cells_access">
                            <router-link :to="{path:'/my/owerInfo'}" class="weui_cell">
                                <div class="weui_cell_hd">
                                    <img src="../../images/grzl.jpg" alt="icon" style="margin-right:5px;display:block">
                                </div>
                                <div class="weui_cell_bd weui_cell_primary">
                                    <p>个人资料</p>
                                </div>
                                <div class="weui_cell_ft"></div>
                            </router-link>
                            <!-- <router-link :to="{path:'/my/company'}" class="weui_cell">
                                <div class="weui_cell_hd">
                                    <img src="../../images/gywm.jpg" alt="icon" style="margin-right:5px;display:block">
                                </div>
                                <div class="weui_cell_bd weui_cell_primary">
                                    <p>功能说明</p>
                                </div>
                                <div class="weui_cell_ft"></div>
                            </router-link> -->
                            <router-link  class="weui_cell" :to="{path:'/login/changePassword'}" v-if="loginFlag">
                                <div class="weui_cell_hd">
                                    <img src="../../images/gnsm.jpg" alt="icon" style="margin-right:5px;display:block">
                                </div>
                                <div class="weui_cell_bd weui_cell_primary">
                                    <p>修改密码</p>
                                </div>
                                <div class="weui_cell_ft"></div>
                            </router-link>
                        </div>
                        <div class="button" v-if="!dateFlag" @click="outLogin">
                                <mt-button type="danger" size="large">退出当前账号</mt-button>
                        </div>                       
                    </div>
                    
        </div>
    </template>
    
    <script>
        import {Toast} from 'mint-ui'
        export default{
            data() {
                return {
                    dateFlag:true,
                    nowUser:'',
                    sessionId:'',
                    loginFlag: '',
                }
            },
            created() {
                this.stringToBoolean(localStorage.getItem('loginFlag'));
                this.loginStatus();
                this.sessionId = localStorage.getItem('sessionId');
                this.nowUser = localStorage.getItem('userName');
            },
            methods: {
                stringToBoolean(str){
                    if(str == 'true'){
                        this.loginFlag = true;
                    }else{
                        this.loginFlag = false;
                    }
                },
                loginStatus(){
                    if(this.loginFlag === true){
                        this.dateFlag = false;
                    }else{
                        Toast("请先登录...");
                    }
                },
                outLogin(){
                            this.axios.post('http://zxdc.catsic.com:9090/sampling/user/logout',{'data':{}},{
                                    'headers':{
                                        'Content-Type':'application/json',
                                        'mobileHeader':'{"sessionId":'+this.sessionId+'}'
                                        }
                                        }).then(result=>{
                                            if(result.data.status == "1000"){
                                                localStorage.setItem("UserRole","");
                                                this.dateFlag = true;
                                                this.sessionId = "";
                                                localStorage.setItem("userName","");
                                                localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                                this.$router.push({
                                                    path:'/login'
                                                });
                                            }else if(result.data.status == "4001"||result.data.status == "5005"||result.data.status == "1002"){
                                                localStorage.setItem("userName","");
                                                this.dateFlag = true;
                                                this.sessionId = "";
                                                localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                                this.msg = result.data.msg;
                                                Toast(this.msg);
                                                this.$router.push({
                                                    path:'/login'
                                                });
                                            }else if(result.data.status == "1001"){
                                                //localStorage.setItem("userName","");
                                                Toast(result.data.msg);
                                            }
                                });
                    },
                }
            }
    </script>
    
    <style lang="scss" scoped>
        .backgroud{
            /*padding-top: 20px;*/
        }
       .midPic {
				width: 100%;
				height: 160px;
				background-image: url(../../images/bg.jpg);
				background-size: 100% 100%;
				text-align: center;
			}
			
			.midPic a img {
				height: 50%;
				margin-top: 25px;
			}
			
			#dlts {
				color: #FFFFFF;
				font-size: 1.05em !important;
				margin-top: 5px;
			}
			
			.weui_cells {
				margin-top: 0;
			}
			
			.weui_cell {
				height: 3.5em;
			}
			
			.weui_cell_bd p {
				display: block;
				color: #666666;
				font-size: 1.2em;
				margin-left: 8px;
				font-family: "黑体";
			}
			
			.weui_cell_hd {
				width: 30px;
			}
			
			.weui_cell_hd img {
				width: 100%;
			}

			#dlts {
				font-size: 1.15em;
			}
			
			.weui_cell p {
				margin-left: 15px;
			}
            .button{
                margin-top: 15%;
                padding-left: 5%;
                padding-right: 5%;
            }
            /*改类名解决tabar无法切换问题*/
            .mui-bar-tab .mui-tab-item-lib.mui-active {
                color: #007aff;
            }

            .mui-bar-tab .mui-tab-item-lib {
                display: table-cell;
                overflow: hidden;
                width: 1%;
                height: 50px;
                text-align: center;
                vertical-align: middle;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #929292;
            }

            .mui-bar-tab .mui-tab-item-lib .mui-icon {
                top: 3px;
                width: 24px;
                height: 24px;
                padding-top: 0;
                padding-bottom: 0;
            }

            .mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
                font-size: 11px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    </style>